<template>
	<cl-crud ref="crud" @load="onLoad">
		<cl-pagefull>
			<template #head>
				<el-row type="flex">
					<cl-filter-group v-model="search">
						<!-- <cl-filter label="所属事业部">
							<cl-select
								v-model="search.biz_id"
								placeholder="请选择"
								filterable
							>
								<el-option
									v-for="item in business"
									:key="item.biz_id"
									:label="item.biz_name"
									:value="item.biz_id"
								/>
							</cl-select>
						</cl-filter> -->
						<cl-filter label="关键字">
							<el-input
								v-model="search.keyword"
								placeholder="请输入品牌名称"
								clearable
								style="width: 200px"
								@change="refresh()"
							/>
						</cl-filter>
					</cl-filter-group>
					<cl-flex1 />
					<div>
						<el-button
							icon="el-icon-plus"
							type="primary"
							v-auth="'store_crm3_add'"
							@click="openForm()"
						>
							新增品牌
						</el-button>
					</div>
				</el-row>
			</template>

			<div style="height: 100%">
				<!-- 数据表格 -->
				<cl-table v-bind="table">
					<cl-empty slot="empty" />
					<template #column-status="{ scope: { row } }">
						<el-tag :type="filterType(row.bra_status, 'type')">
							{{ row.bra_status | filterType }}
						</el-tag>
					</template>
					<template #column-opt="{ scope: { row } }">
						<div class="flex flex-align-start">
							<!-- <el-button type="primary" @click="upgrade(row)">
								升级
							</el-button> -->
							<el-button type="danger" @click="copy(row)"> 复制 </el-button>
							<el-dropdown
								class="ml-1"
								size="medium"
								@command="command => onCommand(command, row)"
							>
								<el-button>
									更多<i class="el-icon-arrow-down el-icon--right" />
								</el-button>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item command="edit">修改</el-dropdown-item>
									<el-dropdown-item command="remove">删除</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</div>
					</template>
				</cl-table>
			</div>
			<template #foot>
				<el-row type="flex">
					<cl-flex1 />
					<!-- 分页控件 -->
					<zm-pagination />
				</el-row>
			</template>
		</cl-pagefull>
		<cl-brand-form ref="form" @confirm="refresh" />
	</cl-crud>
</template>

<script>
import { mapActions } from "vuex";
const statusMap = {
	0: { type: "warning", text: "停用" },
	1: { type: "primary", text: "正常" },
	99: { type: "danger", text: "删除" }
};
const filterType = (val, key = "text") => {
	// console.log(val);
	return statusMap[val] ? statusMap[val][key] : "未知";
};
export default {
	name: "CrmBrandList",
	filters: {
		filterType
	},
	data() {
		return {
			// 表格配置
			table: {
				"context-menu": ["refresh"],
				columns: [
					{
						type: "index",
						label: "#",
						align: "center",
						width: 50,
						fixed: true
					},
					{
						label: "品牌名称",
						prop: "bra_name",
						minWidth: 150,
						align: "left",
						showOverflowTooltip: true
					},
					// { label: "所属事业部", prop: "biz_name", width: 150 },
					{
						label: "负责人",
						prop: "bra_contact",
						minWidth: 120,
						align: "left",
						showOverflowTooltip: true
					},
					{ label: "投入资金（￥）", prop: "investment", width: 220 },
					{
						label: "联系电话",
						prop: "bra_mobile",
						width: 150
					},
					// { label: "创建时间", prop: "addtime", width: 150 },
					{ label: "状态", prop: "status", width: 100 },
					{ label: "操作", prop: "opt", width: 160, fixed: "right" }
				]
			},
			search: {
				biz_id: "",
				keyword: "",
				showpage: 1
			}
		};
	},

	created() {
		this.search.biz_id = this.getCurrBiz();
	},
	methods: {
		...mapActions("common", ["getBrands"]),
		filterType,
		onLoad({ ctx, app }) {
			ctx.service(this.$service.brand).done();
			app.refresh(this.search);
		},
		// crud刷新
		refresh(reset = true) {
			let params = { ...this.search };
			if (reset) {
				params.page = 1;
			}
			this.$refs.crud.refresh(params);
		},
		keywordChage(v) {
			if (v) return;
			this.refresh();
		},
		openForm(type = "add", data = {}) {
			this.$refs.form.open(type, data);
		},
		// 升级
		upgrade(row) {},
		// 复制
		copy(row) {
			this.openForm("copy", row);
		},
		// 更多
		onCommand(command, row) {
			this[command](row);
		},
		edit(row) {
			this.openForm("edit", row);
		},
		// 删除
		remove({ bra_id }) {
			this.confirm()
				.then(async () => {
					await this.$service.brand.remove(bra_id);
					this.$message.success("操作成功");
					this.refresh();
					this.getBrands();
				})
				.catch(() => {});
		}
	}
};
</script>

<style lang="scss" scoped></style>
